import React from 'react';
import { useTranslation } from 'react-i18next';
import { ImageCollectionItem as ImageCollectionItemType } from '../../../hooks/useImageCollection';
import { getDynamicFonts } from '@/utils/fontUtils';

interface ImageCollectionItemProps {
  item: ImageCollectionItemType;
  onClick?: (item: ImageCollectionItemType) => void;
}

/**
 * 图片收藏项组件
 */
const ImageCollectionItem: React.FC<ImageCollectionItemProps> = ({ item, onClick }) => {
  const { t, i18n } = useTranslation();
  const dynamicFonts = getDynamicFonts(i18n);
  const { avatar, username, Images } = item;

  // 获取第一张图片作为封面
  const coverImage = Images && Images.length > 0 ? Images[0] : null;

  // 图片数量
  const imageCount = Images ? Images.length : 0;

  /**
   * 处理项目点击
   */
  const handleClick = () => {
    if (onClick) {
      onClick(item);
    }
  };

  return (
    <div
      className="bg-[rgb(19,19,19)] rounded-lg overflow-hidden cursor-pointer transition-transform duration-200 hover:scale-105"
      onClick={handleClick}
    >
      {/* 头部区域：头像和用户信息 */}
      <div className="flex items-center gap-2 sm:gap-3 px-3 sm:px-4 py-2 sm:py-3">
        {/* 用户头像 */}
        <div className="w-10 sm:w-12 h-10 sm:h-12 rounded-xl overflow-hidden flex-shrink-0">
          <img
            src={avatar}
            alt={username}
            className="w-full h-full object-cover"
            style={{ objectPosition: 'center top' }}
            onError={(e) => {
              // 头像加载失败时显示默认头像
              const target = e.target as HTMLImageElement;
              target.src = '';
            }}
          />
        </div>

        {/* 用户信息 */}
        <div className="flex-1 min-w-0">
          {/* 用户名 */}
          <div style={{ fontFamily: dynamicFonts.font1 }}
            className="text-white font-medium text-[0.9rem] sm:text-[1rem] truncate mb-1">
            {username}
          </div>

          {/* 图片数量信息 */}
          <div className="flex items-center gap-1 text-gray-400 text-xs">
            <i className="fas fa-image text-xs" />
            <span className='text-white text-[0.8rem] sm:text-[0.9rem]'>{imageCount}</span>
          </div>
        </div>
      </div>

      {/* 封面图片区域 */}
      <div className="px-3 sm:px-4 pb-3 sm:pb-4">
        <div className="w-full rounded-lg overflow-hidden bg-gray-800" style={{ aspectRatio: '9/16' }}>
          {coverImage ? (
            <img
              src={coverImage}
              alt={t('collection.userImageAlt', { username })}
              className="w-full h-full object-cover"
              onError={(e) => {
                // 图片加载失败时显示占位符
                const target = e.target as HTMLImageElement;
                target.style.display = 'none';
              }}
            />
          ) : (
            // 没有图片时显示占位符
            <div className="w-full h-full flex items-center justify-center text-gray-500">
              <div className="text-center">
                <i className="fas fa-image text-2xl sm:text-3xl mb-2" />
                <div className="text-xs sm:text-sm">{t('imageCollection.noImages')}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ImageCollectionItem; 